<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <!-- checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。
     el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍
     。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。 -->
    <el-checkbox-group v-model="checkList">
      <!-- 选项 -->
      <!-- :label="item.id  不添加这个点击选择按钮就会全部选中  增加唯一性 -->
      <el-checkbox v-for="item in allRoles" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoleList } from '@/api/setting'
// 获取用户信息
import { getUserDetailById } from '@/api/user'
// 给员工分配角色
import { assignRoles } from '@/api/employees'
export default {
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      checkList: [], // 多选按钮框的数据绑定
      allRoles: [] // 多选按钮
    }
  },
  created() {
    //   页面加载就触发
    this.getRoleList()
  },
  methods: {
    //   获取角色列表
    async  getRoleList() {
      const { rows } = await getRoleList()
      //   console.log(rows)
      this.allRoles = rows
    },
    // 根据id获取用户信息 父组件通过ref 传送id
    async getUserDetailById(id) {
      const { roleIds } = await getUserDetailById(id)
      console.log('这是点击父组件的角色按钮')
      // 把获取到的数据添加到多选按钮框的数据绑定
      //   如果存在指定的值则为选中状态，否则为不选中
      //   有值的选中
      this.checkList = roleIds
    },
    // 关闭取消按钮
    btnCancel() {
      // 清空数据
      this.checkList = []
      //   关闭弹出框
      //   update告诉父组件
      this.$emit('update:showRoleDialog', false)
    },
    // 确认按钮
    async  btnOk() {
      // 选中的内容
      const roleIds = this.checkList
      //  点击的当前用户id
      const id = this.userId
      await assignRoles({
        id,
        roleIds
      })
      //   提示用户
      this.$message.success('修改成功')
      //   关闭弹窗
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>

<style>

</style>
